<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body style="background-color: #eeeeee">
<ul class="layui-nav" style="background-color: white">
    <li class="layui-nav-item" style="margin-left: 50%"><a href="">首页</a></li>
    <li class="layui-nav-item "><a href="">推荐文章</a></li>
    <li class="layui-nav-item "><a href="">工具下载</a></li>
    <li class="layui-nav-item"><a href="">留言小本</a></li>
    <li class="layui-nav-item"><a href="">求助专区</a></li>
    <li class="layui-nav-item"><a href="">关于作者</a></li>
    <li class="layui-nav-item">
        <a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
        </dl>
    </li>
</ul>
<div class="layui-row" style="background-color: #232e3c">
    <div class="layui-col-md3">
        <span style="padding-left: 50px;font-weight: 800;color: white;font-size: 200%">一语知温的博客</span>
    </div>
    <div class="layui-col-md9">
        <img th:src=" @{/img/head_img.png}" style="padding-left: 60%;">
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-md7 layui-col-md-offset1" style="background-color: white">
        <h1 th:text="${article.headline}"></h1>
        <h3 th:text="${article.createDate}"></h3>
        <h2 th:text="${article.content}"></h2>
        <button id="praiseBtn" class="layui-btn">赞<span th:text="${article.praiseNum}"></span>
        </button>
        <h2>用户评论:</h2>
        <div th:each="comment:${conmentList}">
            <h2 th:text="${comment.nickName}"></h2>
            <h3 th:text="${comment.content}"></h3>
            <h4 th:text="${comment.createDate}"></h4>
        </div>
        <div>
            评论此文章:
            <textarea id="commentContent" name="commentContent" required lay-verify="required" placeholder="请输入"
                      class="layui-textarea"></textarea>
            <button id="addComBtn" class="layui-btn"></span>
            </button>
        </div>
    </div>
    <div class="layui-col-md2 layui-col-md-offset1" style="background-color: white">111</div>
    <div class="layui-col-md1">111</div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var $ = layui.jquery;
        $("#addComBtn").on('click', function () {
            /*<![CDATA[*/
            var articleId =/*[[${articleId}]]*/;
            /*]]>*/
            console.log(articleId);
            $.ajax({
                url: "/addComment",
                data: {
                    articleId: articleId,
                    content: $("#commentContent").val(),
                }, success: function () {
                    layer.msg("添加成功");
                }
            });
        });
        $("#praiseBtn").on('click', function () {
            /*<![CDATA[*/
            var articleId =/*[[${articleId}]]*/;
            /*]]>*/
            console.log(articleId);
            $.ajax({
                url: "/praiseBtn",
                data: {
                    articleId: articleId,
                }, success: function () {
                }
            });
        });
    });
</script>
</body>
</html>